<template>
	<!-- 供应商管理 -->
	<view>
		<view class="boxtop">
			<text class="text">{{title}}</text>
		</view>
		<view class="topinput">
			<input type="text" placeholder="搜索" v-model="filterText">
			<select v-model="selectdata">
				<option value=''>供应商名称</option>
				<option>供应商编号</option>
				<option>供应商联系人</option>
			</select>
		</view>
		<view class="box" v-for="(item,index) in filterList" :key="index" @click="topage(index)">
			<view class="boxcent">
				<view class="topcent">
					<text class="text">供应商名称:</text>
					<text class="text1">{{item.name}}</text>
				</view>
				<view class="headcent">
					<view class="tophead">
						<text class="text">供应商编号:</text>
						<text class="text1">{{item.id}}</text>
					</view>
					<view class="head">
						<text class="text">联系人:</text>
						<text class="text1">{{item.linl_name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<drag-button v-show="show" name="新增" :isDock="true" :existTabBar="true" @btnClick="btnClick" />
		</view>
	</view>
</template>

<script>
	import dragButton from '../../../components/drag-button.vue';
	export default {
		components: {
			dragButton
		},
		data() {
			return {
				title:'供应商管理',data:'',filterText:'',selectdata:'',list:[],show:true
			}
		},
		computed:{
			filterList() {
				let selectdata = this.selectdata;
				var arr = []
				this.list.forEach((item) => arr.push(item))	
				if (this.filterText) {
					if(selectdata==''){
						arr = this.list.filter(item => item.name.includes(this.filterText))
					}else if(selectdata=='供应商编号'){
						arr = this.list.filter(item => item.id.includes(this.filterText))
					}else if(selectdata=='供应商联系人'){
						arr = this.list.filter(item => item.linl_name.includes(this.filterText))
					}
						
				}
				return arr
			}			
		},
		onLoad(option) {
			if(option.type !== undefined){
				this.show = false;
			}
			this.getdata();
		},
		methods: {
			async getdata(){
				const res = await this.Request({
					url:'api/supplie/getsupalldata'
				})
				this.list = res.data
				this.data = res
			},
			topage(e){
				var item = JSON.stringify(this.data.data[e]);
				if(this.show == true){
					uni.navigateTo({
						url:'/pages/public/supplie/suppage?item=' + item
					})
				}else{
					uni.navigateTo({
						url:'/pages/public/supplie/suppage?item=' + item+'&type=1'
					})
				}
			},
			btnClick(){
				setTimeout(() => {
					uni.navigateTo({
						url:'/pages/public/supplie/supadd'
					})
				},300)
			}
		}
	}
</script>

<style lang="scss">
	.boxtop{
		width: 100%;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 700;
			color: #d3d3d3;
		}
	}
	.topinput{
		display: flex;
		input{
			height: 30px;
			width: 200px;
			margin: 15px 0 15px 20px;
			border-radius: 10px;
			border: 2px solid #919191;
		}
		select{
			margin: 15px 0 15px 30px;
			border-radius: 10px;
		}
	}
	.boxcent{
		width: 100%;
		background-color: #ffff7f;
		border: 1px solid  #ccc;
		border-radius: 10px;
		.text1{
			font-size: 14px;
			margin-left: 7px;
		}
		.topcent{
			margin: 10px 0 0 50px;
			.text{
				font-size: 17px;
				font-weight: 700;
			}
		}
		.headcent{
			margin: 15px 0 5px 50px;
			display: flex;
			.tophead{
				.text{
					font-size: 17px;
					font-weight: 700;
				}
			}
			.head{
				margin-left: 22px;
				.text{
					font-size: 17px;
					font-weight: 700;
				}
			}
		}
	}
	.box :active{
		background-color: #aaffff;
	}
</style>
